<template lang="jade">

	div.search(style="height: auto;")
		div.input(style="width:100%;")
			input.kw(v-show="show_kw", type="text", v-model="keywords")

		dl.cbox.sub.nptype
			dd(style="width:35%;margin-right: 10px;", v-bind:class="{ 'on': filter.type != ''}")
				selector(placeholder="类型", :options="typelist", :value.sync="filter.type", @on-change="doSelect('1')")
			dd(style="width:30%;margin-right: 10px;", v-bind:class="{ 'on': filter.status != ''}")
				selector(placeholder="状态", :options="statuslist", :value.sync="filter.status", @on-change="doSelect( '2')")
			dd(style="width:35%;", v-bind:class="{ 'on': filter.period != ''}")
				selector(placeholder="期限", :options="periodlist", :value.sync="filter.period", @on-change="doSelect('3')")
		//li.btn
			i.iconfont(@click="searchByKW") &#xe62b;
		//dl.cbox.sub.nptype(style="margin: 0rem;")
			dd(v-bind:class="{ 'on': ptype == ''}",v-on:click="setType('')")
				全部
			dd(v-bind:class="{ 'on': ptype == '1'}",v-on:click="setType('1')")
				楼贷
			dd(v-bind:class="{ 'on': ptype == '2'}",v-on:click="setType('2')")
				车贷
			dd(v-bind:class="{ 'on': ptype == '3'}",v-on:click="setType('3')")
				房利宝






	div#productlist.top.bottom
		ul.productlist(v-infinite-scroll="down()", infinite-scroll-disabled="busy", infinite-scroll-distance="100")
			product-view(:productype="productype", v-for="(index, item) in items", :item.sync="item", :items.sync="items")
			//li(:is="productype", :productype="productype", v-for="(index, item) in items", :item.sync="item", :items.sync="items")
		div.loading(v-if="busy")
			span {{loading}}
</template>

<script>
//import '../assets/sass/common/circle.scss'
//import CssCircle from '../v-circle/components/css-circle.vue'
import ProductView from '../components/index/product'
/* import ReviewView from '../components/index/product'
import GroupView from '../components/index/product' */
import {c_borrow_list, Api_Group_List} from '../config/api'
import {Progress, Swiper, Flexbox, FlexboxItem, Selector} from 'vux';

import api from '../data/api';

var vm = this;
export default{

	/*props:['item'],

	created() {
		this.fetch(1);
	},*/

	data(){
		return{
			filter:{
				type:'',
				period:'',
				status:''
			},

			typelist: [
				{key: '1', value: '楼贷'},
				{key: '2', value: '车贷'},
				{key: '3', value: '房利宝'}
			],

			statuslist:[

				{key: '1', value: '投标中'},
				{key: '2', value: '还款中'},
				{key: '3', value: '已结清'}
			],

			periodlist:[
				{key: '1', value: '1月内'},
				{key: '2', value: '1-3个月'},
				{key: '3', value: '3-6个月'},
				{key: '4', value: '6-12个月'},
				{key: '5', value: '12-24个月'},
				{key: '6', value: '24-36个月'}
			],

			//productype:"current",
			listId:'',
			busy:true,
			show_kw:false,
			items: [],
			obj: [],
			page:1,
			keywords:'',
			page:1,
			name_no_status:'',
			loading:'数据加载中...'
		}
	},
	components: {
		Selector,
		ProductView,
		Progress,
		Swiper,
		Flexbox,
		FlexboxItem
	},
	events:{
		'get': function (msg) {
			//console.log(msg)
			this.page = 1;
			this.listId = msg
			this.fetch(1);
			//this.$route.router.go('/invest/index?productype=current&listId='+msg)
		}
	},

	methods:{



		down: function() {
		  if(this.busy == true || this.items == ''){
			return false;
		  }
		  this.busy = true;
		  //this.fetch(++this.page);
		  if(this.productype=='current' || this.productype =="review")
			this.fetch(++this.page);
		  else
			this.group_fetch(++this.page);
		},

		searchByKW(){
			var that = this;
			if(!show_kw){
				this.show_kw = true;
				return;
			}
			this.fetch(1);
		},

		doSelect(val){
			console.log(val)
			console.log(this.filter.type)

			this.page=1;
			vm.items = [];
			this.listId = '';

			//this.group_fetch(1);
			if(this.filter.type=='3')
				this.group_fetch(1);
			else
				this.fetch(1);

		},

		setList: function (key) {
			this.$store.dispatch('setShowLoading', true);
			this.productype = key;
			this.listId = '';
			this.busy = true;
			this.items=this.obj=[];
			this.page=1;
			if(key=='current' || key =="review")
				this.fetch(1);
			else
				this.group_fetch(1);


			//this.$route.router.go('/invest/'+key+'/index')
			this.$route.router.go('/invest/index?productype='+key)
			//this.$dispatch('show_data');
		},

		/* setType:function(key){
			this.filter.type = key;
			this.page=1;
			vm.items = [];
			this.fetch(1);
		}, */


		async fetch(page){

			/* var data = {'page': page}
			this.$http({url: c_borrow_list+'&page='+page+'&name_no='+this.listId, method: 'GET'}).then(function (rs) {

				var data = rs.data.data, status = rs.data.status
				this.$store.dispatch('setShowLoading', false);

				if(status){
					this.items = this.items.concat(rs.data.data);
					this.busy = false;
				}else{
					this.loading = "没有更多数据了!";
					this.busy = true;
				}
			}); */
			this.loading = '数据加载中...';
			this.productype = 'current';
			//return;
			var params = {
				'page':page,
				'name_no':vm.listId,
				'type':vm.filter.type,
				'period':vm.filter.period,
				'status':vm.filter.status
			};


			var res = await api.invest.loan_list(params);
			vm.$store.dispatch('setShowLoading', false);

			if(res.status && res.data!=null){
				vm.items = vm.items.concat(res.data);
				vm.busy = false;
			}else{
				vm.loading = "没有更多数据了!";
				vm.busy = true;
			}


		},



		async group_fetch(page) {

			this.loading = '数据加载中...';
			this.productype = 'group';
			/* var data = {'page': page}
			this.$http({url:Api_Group_List+'&page='+page, method:'GET'}).then(function(rs){

				var data = rs.data.data, status = rs.data.status
				if(status){
					this.items = this.items.concat(rs.data.data);
					this.obj = Object.assign([], this.obj.concat(rs.data.data));
					this.busy = false;

				}else{
					this.loading = "没有更多数据了!";
					this.busy = true;
				}
				this.$store.dispatch('setShowLoading', false);
			}); */

			//var params = {'page': page}
			var params = {
				'page':page,
				'name_no':vm.listId,
				'type':vm.filter.type,
				'period':vm.filter.period,
				'status':vm.filter.status
			};


			var res = await api.invest.group_list(params);
			this.$store.dispatch('setShowLoading', false);

			if(res.status && res.data!=null){
				this.items = this.items.concat(res.data);
				this.obj = Object.assign([], this.obj.concat(res.data));
				this.busy = false;
			}else{
				this.loading = "没有更多数据了!";
				this.busy = true;
			}

		}
	},
	route: {
		activate ( transition ) {

			vm = this;
			document.title = "投标项目 - 有喜财富手机版"
			this.listId = transition.to.query.listId
			this.productype = transition.to.query.productype;
			if(this.productype == undefined) this.productype = "current";
			if(this.listId == undefined || this.listId == "index") this.listId = "";

			this.items = [];
			transition.next();
			this.$store.dispatch('setShowLoading', true);
			if(this.productype=='current' || this.productype =="review")
				this.fetch(1);
			else
				this.group_fetch(1);
		}
	}
}
</script>

<style lang="scss">
.search{

	.weui_cell{
		padding:0px;
	}
	.weui_select{
		height: auto;
		line-height: inherit;
		min-height: 35px;
	}

	.weui_cell_select .weui_cell_bd:after{
		transform: rotate(135deg);
		top: 45%;
	}

	.nptype {
		dd.on{
			/* .weui_select{
				color: #ff9500;
			} */
			.weui_cell_select .weui_cell_bd:after{
				border-color: #ff9500;
			}
		}
	}

}
</style>


<style lang="scss" scoped>
.sub{
	position: relative;
	border-radius: 0px;
	dd{
		font-size:14px;
	}

	&:after{
		content: ' ';
		border-top: 1px solid #dddfe1;
		position: absolute;
		top: 0px;
		left: 0px;
		height: 1px;
		/* border-width: 1px; */
		display: block;
		width: 100%;
	}
}

.nptype {
    border-radius: 0.1rem;
	margin:0rem;
    padding: 0.125rem 0.25rem;
    vertical-align: middle;
    color: #999;

	dd.on:after {
		display: none;
		/* content: ' ';
		width: 0.8rem;
		height: 0.1rem;
		background: #ff9500;
		position: absolute;
		bottom: -0.10rem;
		margin-left: -0.4rem;
		left: 50%; */
	}
}


</style>
